define(
	[
		"require",
		"apm/ui/business_topo",
		"apm/ui/business_sequence",
		"apm/jquery.fullscreen",
		'apm/ui/myself_select/select',
		"broada/ui/dialog",
		"apm/ui/business_line_3s",
		"../js/business_config_threshold"
	],
	function(require){
		var isExtraPanelFolded = false;

		var forEach = Ember.EnumerableUtils.forEach;
		var zrUtil = require('zrender/tool/util');

		var View = Ember.View.extend({
			select: require('apm/ui/myself_select/select'),
			didInsertElement: function(){
				var view = this,
					$viewRoot = this.$(),
					$extraPanel = $viewRoot.find(".business-detail-gauge-extra"),
					$btnToggle = $viewRoot.find(".btn-toggle-extra-panel"),
					$topoContainer = $viewRoot.find(".topo-container"),
					$topoContent = $topoContainer.find(".topo-content"),
					$extraPanelContent = $extraPanel.find(".apm-panel-content"),
					$w = $(window);

				$btnToggle.click(function() {
					$extraPanel.toggleClass("fold-extra-panel");
					isExtraPanelFolded = $extraPanel.hasClass("fold-extra-panel");
					if($extraPanel[0].style.transition === undefined){
						view.adjustTopoHeight();
					}
				});
				if(isExtraPanelFolded){
					$extraPanel.addClass("fold-extra-panel");
				}

				$extraPanel.on("transitionend", function(e) {
					if(!e.originalEvent){
						return;
					}
					var oriEvt = e.originalEvent;
					//避免各种css动画频繁触发该事件
					if(oriEvt.propertyName == "height" && oriEvt.target == $extraPanelContent[0]){
						view.adjustTopoHeight();
					}
				});
				$topoContainer.on("transitionend", function(e) {
					if(!e.originalEvent){
						return;
					}
					var oriEvt = e.originalEvent;
					//避免各种css动画频繁触发该事件
					if(oriEvt.propertyName == "height" && oriEvt.target == $topoContainer[0]){
						$topoContent.height( $topoContainer.height() );
						APM.trigger("topoContainerResize");
					}
				});

				this.connectCharts();

				view.adjustTopoHeight();

				$(window).on("resize.topoContainerSize", function(){
					view.adjustTopoHeight();
				});
			},

			connectCharts: function(){
				var businessDetailGaugeChart1 = Broada.getView("businessDetailGaugeChart1");
				var businessDetailGaugeChart2 = Broada.getView("businessDetailGaugeChart2");
				var businessDetailGaugeChart3 = Broada.getView("businessDetailGaugeChart3");
				var businessDetailGaugeChart4 = Broada.getView("businessDetailGaugeChart4");
				if(businessDetailGaugeChart1&&businessDetailGaugeChart2
					&&businessDetailGaugeChart3&&businessDetailGaugeChart4) {
					var chart1 = businessDetailGaugeChart1.chart;
					var chart2 = businessDetailGaugeChart2.chart;
					var chart3 = businessDetailGaugeChart3.chart;
					var chart4 = businessDetailGaugeChart4.chart;
					chart1.connect([chart2,chart3,chart4]);
					chart2.connect([chart1,chart3,chart4]);
					chart3.connect([chart1,chart2,chart4]);
					chart4.connect([chart1,chart2,chart3]);
				}
			},

			adjustTopoHeight: function(){
				var headerHeight = 68;
				if($.isFullScreen()){
					headerHeight = 0;
				}
				var appboxHeight = $(window).height()-headerHeight;
				var $topo = this.$().find(".business-detail-gauge-topo"),
					$topoContainer = $topo.find(".topo-container");

				if( $("body").hasClass("fullscreen")){
					$topo.height($(window).height() - 20);
				}
				else{
					$topo.height(appboxHeight-138);
				}
				$topoContainer.height($topo.height()-10-this.$().find(".business-detail-gauge-extra").height());
			},

			willDestroyElement: function(){
				$(window).off("resize.topoContainerSize");
				$("body").removeClass("fullscreen");
			},

			Topo: require("apm/ui/business_topo"),

			LineChartView: require("apm/ui/business_line_3s"),

			Dialog: require("broada/ui/dialog"),

			ThresholdConfig: require("../js/business_config_threshold"),

			actions: {
				fullScreen: function(){
					var ctrl = this;
					window.onresize = function (){
					    if( ($(window).outerWidth() == $(".business-detail-gauge-topo").outerWidth())){
					    	$(".business-detail-gauge-topo").find('.toolbar').hide();
							$(".business-detail-gauge-topo").removeClass("fullscreen-transparent").addClass("fullscreen-full");

					       	ctrl.get("controller").set("isFull",true);
					    }else{
					       	ctrl.get("controller").set("isFull",false);
					       	$(".business-detail-gauge-topo").find('.toolbar').show();
					       	if($(".business-detail-gauge-topo").hasClass("fullscreen-full")){
					       		$(".business-detail-gauge-topo").removeClass("fullscreen-full").addClass("fullscreen-transparent");
					       }
					    }
					}

					if (!$.support.fullscreen) {
						$("body").toggleClass("fullscreen");
						this.adjustTopoHeight();
					}else{
						$(".business-detail-gauge-topo").fullScreen();
					}
				}
			}
		});

		APM.BusinessDetailGaugeView = View;

		return View;
	}
);